document.addEventListener('DOMContentLoaded', function() {
  // 购物车数据
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  
  // DOM元素
  const cartIcon = document.querySelector('.cart-icon');
  const cartCount = document.querySelector('.cart-count');
  const cartModal = document.querySelector('.cart-modal');
  const closeCart = document.querySelector('.close-cart');
  const overlay = document.querySelector('.overlay');
  const cartItems = document.querySelector('.cart-items');
  const totalPrice = document.querySelector('.total-price');
  const checkoutBtn = document.querySelector('.checkout-btn');
  const addToCartButtons = document.querySelectorAll('.add-to-cart');
  
  // 更新购物车显示
  function updateCartDisplay() {
    // 更新购物车数量
    const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
    cartCount.textContent = totalItems;
    
    // 更新购物车内容
    if (cart.length === 0) {
      cartItems.innerHTML = `
        <div class="empty-cart">
          <p>🛒 购物车是空的</p>
          <p>快去添加喜欢的电影吧！</p>
        </div>
      `;
      totalPrice.textContent = '¥0.00';
      return;
    }
    
    cartItems.innerHTML = '';
    let total = 0;
    
    cart.forEach((item, index) => {
      const itemTotal = item.price * item.quantity;
      total += itemTotal;
      
      const cartItem = document.createElement('div');
      cartItem.className = 'cart-item';
      cartItem.innerHTML = `
        <img src="${item.image || 'https://via.placeholder.com/80x100?text='+item.name}" alt="${item.name}">
        <div class="cart-item-details">
          <div class="cart-item-title">${item.name}</div>
          <div class="cart-item-price">¥${item.price.toFixed(2)}</div>
          <div class="cart-item-quantity">
            <button class="quantity-btn minus" data-index="${index}">-</button>
            <input type="text" class="quantity-input" value="${item.quantity}" readonly>
            <button class="quantity-btn plus" data-index="${index}">+</button>
          </div>
          <button class="remove-item" data-index="${index}">删除</button>
        </div>
      `;
      cartItems.appendChild(cartItem);
    });
    
    totalPrice.textContent = `¥${total.toFixed(2)}`;
    
    // 添加事件监听器
    document.querySelectorAll('.minus').forEach(button => {
      button.addEventListener('click', decreaseQuantity);
    });
    
    document.querySelectorAll('.plus').forEach(button => {
      button.addEventListener('click', increaseQuantity);
    });
    
    document.querySelectorAll('.remove-item').forEach(button => {
      button.addEventListener('click', removeItem);
    });
  }
  
  // 添加商品到购物车
  function addToCart(event) {
    event.preventDefault();
    
    const button = event.currentTarget;
    const id = button.dataset.id;
    const name = button.dataset.name;
    const price = parseFloat(button.dataset.price);
    const image = button.parentElement.querySelector('.pic img').src;
    
    // 检查商品是否已在购物车中
    const existingItemIndex = cart.findIndex(item => item.id === id);
    
    if (existingItemIndex !== -1) {
      // 商品已存在，增加数量
      cart[existingItemIndex].quantity++;
    } else {
      // 新商品，添加到购物车
      cart.push({
        id,
        name,
        price,
        quantity: 1,
        image
      });
    }
    
    // 保存到本地存储
    localStorage.setItem('cart', JSON.stringify(cart));
    
    // 更新显示
    updateCartDisplay();
    
    // 显示添加成功提示
    alert(`"${name}" 已添加到购物车！`);
  }
  
  // 减少商品数量
  function decreaseQuantity(event) {
    const index = event.currentTarget.dataset.index;
    
    if (cart[index].quantity > 1) {
      cart[index].quantity--;
    } else {
      // 如果数量为1，则删除商品
      cart.splice(index, 1);
    }
    
    localStorage.setItem('cart', JSON.stringify(cart));
    updateCartDisplay();
  }
  
  // 增加商品数量
  function increaseQuantity(event) {
    const index = event.currentTarget.dataset.index;
    cart[index].quantity++;
    localStorage.setItem('cart', JSON.stringify(cart));
    updateCartDisplay();
  }
  
  // 删除商品
  function removeItem(event) {
    const index = event.currentTarget.dataset.index;
    cart.splice(index, 1);
    localStorage.setItem('cart', JSON.stringify(cart));
    updateCartDisplay();
  }
  
  // 结算
  function checkout() {
    if (cart.length === 0) {
      alert('购物车是空的，请先添加商品！');
      return;
    }
    
    const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    alert(`结算成功！总金额：¥${total.toFixed(2)}`);
    
    // 清空购物车
    cart = [];
    localStorage.removeItem('cart');
    updateCartDisplay();
    
    // 关闭购物车
    cartModal.classList.remove('active');
    overlay.classList.remove('active');
  }
  
  // 事件监听器
  cartIcon.addEventListener('click', () => {
    cartModal.classList.add('active');
    overlay.classList.add('active');
  });
  
  closeCart.addEventListener('click', () => {
    cartModal.classList.remove('active');
    overlay.classList.remove('active');
  });
  
  overlay.addEventListener('click', () => {
    cartModal.classList.remove('active');
    overlay.classList.remove('active');
  });
  
  addToCartButtons.forEach(button => {
    button.addEventListener('click', addToCart);
  });
  
  checkoutBtn.addEventListener('click', checkout);
  
  // 初始化购物车显示
  updateCartDisplay();
});

// 轮播图功能
window.onload = function(){
    // 自定义$选择器函数
    function $(param){
        // 如果第二个参数为true，返回所有匹配元素
        if(arguments[1] == true){
            return document.querySelectorAll(param);
        }else{
            // 否则返回第一个匹配元素
            return document.querySelector(param);
        }
    }
    
    // 使用$函数选择元素
    var $box = $(".box");               // 主容器
    var $box1 = $(".box-1 ul li",true); // 所有幻灯片(节点列表)
    var $box2 = $(".box-2 ul");         // 导航点容器
    var $box3 = $(".box-3");            // 导航按钮容器
    var $length = $box1.length;         // 幻灯片数量
    
    // 创建导航点HTML字符串
    var str = "";
    for(var i =0;i<$length;i++){
        if(i==0){
            // 第一个导航点默认有'on'类
            str +="<li class='on'>"+(i+1)+"</li>";
        }else{
            str += "<li>"+(i+1)+"</li>";
        }
    }
    $box2.innerHTML = str; // 将导航点插入DOM
    
    var current = 0; // 当前幻灯片索引
    
    // 设置自动轮播定时器
    var timer;
    timer = setInterval(go,2000); // 每3秒切换一次
    
    // 切换到下一张幻灯片的主函数
    function go(){
        // 隐藏所有幻灯片并移除导航点激活状态
        for(var j =0;j<$length;j++){
            $box1[j].style.display = "none";
            $box2.children[j].className = "";
        }
        // 如果到达最后一张，回到第一张
        if($length == current){
            current = 0;
        }
        // 显示当前幻灯片并激活对应导航点
        $box1[current].style.display = "block";
        $box2.children[current].className = "on";
        current++; // 递增索引
    }
    
    // 鼠标悬停幻灯片时暂停自动轮播
    for(var k=0;k<$length;k++){
        $box1[k].onmouseover = function(){
            clearInterval(timer);
        }
        $box1[k].onmouseout = function(){
            timer = setInterval(go,2000);
        }
    }
    
    // 鼠标悬停导航按钮时暂停自动轮播
    for(var p=0;p<$box3.children.length;p++){
        $box3.children[p].onmouseover = function(){
            clearInterval(timer);
        };
        $box3.children[p].onmouseout = function(){
            timer = setInterval(go,2000);
        }
    }
    
    // 导航点功能实现
    for(var u =0;u<$length;u++){
        // 在每个导航点上存储索引
        $box2.children[u].index = u;
        $box2.children[u].onmouseover = function(){
            clearInterval(timer);
            // 隐藏所有幻灯片和导航点
            for(var j=0;j<$length;j++){
                $box1[j].style.display = "none";
                $box2.children[j].className = "";
            }
            // 激活点击的导航点和对应幻灯片
            this.className = "on";
            $box1[this.index].style.display = "block";
            current = this.index +1; // 设置下一张索引
        }
        $box2.children[u].onmouseout = function(){
            timer = setInterval(go,2000); // 恢复自动轮播(注意：这里使用了2秒间隔)
        }
    }
    
    // 上一张按钮点击事件
    $box3.children[0].onclick = function(){
        back();
    }
    // 下一张按钮点击事件
    $box3.children[1].onclick = function(){
        go();
    }
    
    // 切换到上一张幻灯片的函数
    function back(){
        // 隐藏所有幻灯片和导航点
        for(var j =0;j<$length;j++){
            $box1[j].style.display = "none";
            $box2.children[j].className = "";
        }
        // 如果在第一张，则跳到最后一张
        if(current == 0){
            current = $length;
        }
        // 显示上一张幻灯片并激活对应导航点
        $box1[current-1].style.display = "block";
        $box2.children[current-1].className = "on";
        current--; // 递减索引
    }
        
}